<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            background-color: #f2f2f2;
        }
        .el-header li{
            font-size: 18px;
            float: right;
            color: white;
            margin-top: 0;

        }

        .el-main {


        }

        .el-footer {

        }

        .el-aside {

        }
        .el-card__body{

            padding: 0;
        }
        a{
            text-decoration: none;
            color: #000;
            text-align: center;
        }
        li{
            list-style: none;
            margin-right: 40px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="60px" style="background-color: #545c64;position:fixed;top:0;left:0;width:100%;z-index:9999">
            <div style="width: 1200px;margin: 0 auto">
                <img src="../img/zhaopai.jpg" style="vertical-align: middle" width="150" height="60">
                <span style="float:right;margin-right: 10px;">
                    <el-menu mode="horizontal" style="background-color: #545c64">
                        <el-menu-item index="1"><a href="首页.html">网站首页</a></el-menu-item>
                        <el-menu-item index="2"><a href="关于我们.html">关于我们</a></el-menu-item>
                        <el-menu-item index="3"><a href="photoPrice.html">拍摄价格</a></el-menu-item>
                        <el-menu-item index="4"><a href="作品展示.html">作品展示</a></el-menu-item>
                        <el-menu-item index="5"><a href="联系我们.html">联系我们</a></el-menu-item>
                    </el-menu>
                </span>
            </div>
        </el-header>
        <div style="color: black;font-size: 14px;background-color: white;margin-bottom: 10px;height: 64px">
            <div style="position: relative;top:20px;left: 350px">
                <span>你的位置</span><i class="el-icon-d-arrow-right"></i><a href=""><span><i class="el-icon-s-home"></i>网站首页</span></a><i class="el-icon-d-arrow-right"></i>
                <a href=""><span>拍摄价格</span></a><i class="el-icon-d-arrow-right"> </i><a href=""><span>儿童摄影</span></a>
            </div>
            <div style="width: 63%;position: relative;left: 350px;top:10px"><el-divider></el-divider></div>
        </div>
        <el-main style="width: 1200px;height: 1200px;margin: 0 auto; z-index: 1">

            <el-row gutter="10">
                <el-col span="5" >
                    <div style="height: 1000px">
                    <el-card style="text-align: center;">
                    <ul>
                        <li><a href="" ><span style="color: #1baadb;font-size: 24px;">拍摄价格</span></a></li>
                        <li><hr><a href="" title="childPrice"><span>儿童摄影</span></a><hr></li>
                        <li><a href="" title="familyPrice"><span>家庭合影</span></a></li>
                        <li><hr><a href="" title="artPrice"><span>艺术摄影</span></a><hr></li>
                        <li><a href="" title="xizhuangPrice"><span>戏装摄影</span></a></li>
                        <li><hr><a href="" title="idPrice"><span>证件摄影</span></a><hr></li>
                        <li><a href="" title="classicsPrice"><span>经典摄影</span></a></li>
                        <li><hr><a href="" title="marryPrice"><span>婚纱摄影</span></a><hr></li>
                        <li><a href="" title="teamPrice"><span>团队摄影</span></a> <hr></li>
                    </ul>
                    </el-card>
                    </div>
                </el-col>

                <el-col style="margin: 10px 0;" span="4" v-for=" pp in  artPriceArr">
                    <el-card style="text-align: center">
                        <a href=""><img :src="pp.url" width="100%" height="100%"></a>
                        <a href="" ></a><span style="color: #1baadb;font-size: 14px">{{pp.title}}</span>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
                <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
                <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

                artPriceArr:[{url: "artPrice/price3-1.jpg", title: "“古风今韵”儿童照"}, {url: "artPrice/price3-2.jpg", title: "“国风”亲子照"},
                    {url: "artPrice/price3-3.jpg", title: "“国风”亲子照"}
                ]
            }
        },
        methods: {}
    })
</script>
</html>